<template>
  <div>
    <el-card style="margin: 20px 0px">
      <!-- 选择买家账号 -->
      <el-select v-model="buyerId" placeholder="选择买家账号">
        <div v-for="buyer in buyerList" :key="buyer.buyerId">
          <el-option :label="buyer.buyerId" :value="buyer.buyerId"></el-option>
        </div>
      </el-select>
      <!-- 显示买家名 -->
      <el-input
        :value="getBuyerName"
        placeholder="显示买家"
        style="width: 250px; margin-left: 20px"
        readonly
      ></el-input>
      <el-button
        type="success"
        icon="el-icon-tickets"
        style="margin-left: 20px"
        @click="buyerId = ''"
        >查看全部</el-button
      >
    </el-card>
    <!-- 显示历史记录 -->
    <el-card>
    <el-table style="width: 100%; margin-top: 50px" border :data="list">
      <el-table-column
        type="index"
        label="序号"
        width="80px"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="buyerId"
        label="用户账号"
        width="200px"
      ></el-table-column>
      <el-table-column
        prop="wares.waresName"
        label="商品名"
        width="200px"
      ></el-table-column>
      <el-table-column
          prop="prop"
          label="商品图片"
          width="200px"
          align="center"
        >
        <template slot-scope="{ row }">
            <div class="block">
              <el-carousel
                height="80px"
                :autoplay="false"
                indicator-position="none"
              >
                <el-carousel-item v-for="item in row.wares.pictureList" :key="item">
                  <img :src="item" alt="123" width="80px" height="80px" />
                </el-carousel-item>
              </el-carousel>
            </div> </template
        ></el-table-column>
      <el-table-column
        prop="waresNumber"
        label="商品数"
        width="100px"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="finishTime"
        label="结束时间"
        width="200px"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="historyOrderState"
        label="交易结果"
        width="100px"
        align="center"
      ></el-table-column>
      <el-table-column prop="prop" label="操作" width="width">
        <template slot-scope="{ row }">
          <el-button
            type="danger"
            icon="el-icon-delete"
            @click="deleteHistoryOrder(row.historyOrderId)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      style="margin-top: 20px; text-align: center"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="page"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="limit"
      layout="sizes, prev, pager, next, total"
      :total="total"
    >
    </el-pagination>
  </el-card>
  </div>
</template>

<script>
export default {
  name: "HistoryOrder",

  data() {
    return {
      page: 1,
      limit: 5,
      total: 0,
      list: [],
      buyerList:[],
      buyerId: this.$route.params.buyerId||"",
    };
  },

  mounted() {
    this.getHistoryOrderList();
    this.getBuyerList();
  },

  methods: {
    handleSizeChange(limit) {
      this.limit = limit;
      this.getHistoryOrderList();
    },
    handleCurrentChange(pager) {
      this.page = pager;
      this.getHistoryOrderList();
    },
    //获取所有买家
    async getBuyerList() {
      let result = await this.$API.buyer.reqSellerBuyerList();
      if (result.code == 200) {
        this.buyerList = result.data;
      } else {
        return Promise.reject(new Error("false"));
      }
    },
    //正常显示订单状态
    historyOrderState(historyOrderState) {
      if (historyOrderState == 1) {
        return "交易成功";
      } else {
        return "交易失败";
      }
    },
    //获取所有历史记录
    async getHistoryOrderList() {
      const { page, limit, buyerId } = this;
      let result = await this.$API.historyOrder.reqHistoryOrderList({
        page,
        limit,
        buyerId,
      });
      if (result.code == 200) {
        this.total = result.data.total;
        this.list = result.data.historyOrderList;
        for (let i of this.list) {
          i.historyOrderState = this.historyOrderState(i.historyOrderState);
        }
      } else {
        return Promise.reject(new Error("false"));
      }
    },
    //删除历史记录
    async deleteHistoryOrder(historyOrderId) {
      let result = await this.$API.historyOrder.reqDeleteHistoryOrder(
        historyOrderId
      );
      if (result.code == 200) {
        this.$message({
          message: result.data,
          type: "success",
        });
        this.getHistoryOrderList();
      } else {
        return Promise.reject(new Error("false"));
      }
    },
  },
  computed: {
    getBuyerName() {
      for (let i of this.buyerList) {
        if (i.buyerId === this.buyerId) {
          return i.buyerName;
        }
      }
      return "";
    },
  },
  watch: {
    buyerId() {
      this.getHistoryOrderList();
    },
  },
};
</script>

<style lang="scss" scoped>
</style>